<template>
	<view class="container-inner">
		<!-- <scroll-view class="letter-scroll" scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView"> -->
			<view class="selectCity">
				<view class="hotcity-common">定位城市</view>
				<view class="thisCityName" @click="chooseCity(position)">{{ position }}</view>
				<!-- <view class="thisCityName" :data-city="city" :data-code="currentCityCode">{{city}}</view> -->
				<view class="hotcity-common">热门城市</view>
				<view class="item_city " v-for="(ct, index) in hotcityList" :key="index" :class="index % 3 == 2 ? 'last' : ''" :data-city="ct" @click="chooseCity(ct)">
					{{ ct }}
				</view>
			</view>
			<!-- 	<view class="selection" v-for="(item,index) in citylist" :key="index">
				<view class="item_letter" :id="index">{{index}}</view>
				<view class="item_city " v-for="(list,listIn) in item" :key="listIn" @click="chooseCity(list.name)">
					{{list.name}}
				</view>

			</view> -->
			<!-- 字母导航 -->
			<!-- <view class="navigation-bars">
				<view class="navigation-bars-initial " :class="letterActive==item?'active':''" v-for="(item,index) in initial " :key="index"
				 @click="goToNode(item)">
					{{item}}
				</view>
			</view> -->
			<!-- 城市选择器 -->
			<view class="select-city-list">
				<u-index-list :scrollTop="scrollTop" :index-list="indexList" :activeColor="'#E41805'">
					<view class="scroll-view-item" v-for="(item, index) in citylist" :key="index">
						<u-index-anchor :index="index" :custom-style="{ backgroundColor: '#fff' }" />
						<view class="city-wrapper">
							<view class="item_city " v-for="(ct, listIn) in item" :key="listIn" @click="chooseCity(ct.name)">{{ ct.name }}</view>
						</view>
					</view>
				</u-index-list>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
import { city } from '../../apis/new-car/index.js';
export default {
	data() {
		return {
			hotcityList: ['北京', '上海', '郑州', '广州', '深圳', '成都'],
			// initial: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
			// 	'V', 'W', 'X', 'Y', 'Z'
			// ], //字母导航
			toView: '', //跳转id
			letterActive: '', //字母选中状态
			position: '',
			type: '',
			citylist: '',
			scrollTop: 0,
			indexList: []
		};
	},
	// onLoad(option) {
	// 	console.log("option",option)
	// 	let _self = this
	// 	this.position=option.city;
	// 	uni.getStorage({
	// 		key: 'position',
	// 		success(e) {
	// 			_self.position = e.data || '成都'
	// 		}
	// 	})
	// 	_self.type = option.type
	// 	_self.getcity()

	// },
	onLoad: function(option) {
		let _self = this;
		this.position = option.city;
		uni.getStorage({
			key: 'position',
			success(e) {
				_self.position = e.data || '成都';
			}
		});
		_self.type = option.type;
		_self.getcity();
	},
	methods: {
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/**
		 * 去到对应的节点
		 */
		goToNode: function(val) {
			let that = this;
			var hash = val;
			that.toView = hash;
			that.letterActive = hash;
		},
		// 城市列表
		getcity() {
			let _self = this;
			city()
				.then(res => {
					_self.citylist = res.data.cities;
					_self.indexList = Object.keys(res.data.cities) || [];
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 选择城市
		chooseCity(val) {
			this.position = val;
			uni.setStorage({
				key: 'position',
				data: val
			});
			let pages = getCurrentPages(); // 当前页面
			let prePage = pages[pages.length - 2]; // 前一个页面
			prePage.setData({
				//把需要回传的值保存到上一个页面
				info: val
			});
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less">
.container-inner {
	position: relative;

	.container {
		height: 100vh;
		overflow: hidden;
		padding-left: 30rpx;
	}

	input {
		text-align: center;
		font-size: 32rpx;
		padding: 5px;
	}

	.searchLetter {
		flex-shrink: 0;
		width: 30rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #666;
	}

	.searchLetter view {
		color: #00b6e9;
		padding-top: 12rpx;
		font-size: 20rpx;
		line-height: 20rpx;
	}

	.touchClass {
		background-color: #fff;
		color: #fff;
		padding-top: 240rpx;
		padding-bottom: 16rpx;
	}

	.showSlectedLetter {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -100rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		font-size: 52rpx;
		z-index: 1;
	}

	.selection {
		/* display: flex; */
		width: calc(100vw - 60rpx);
		/* flex-direction: column; */
		margin-top: 10rpx;
	}

	.selectCity {
		padding: 0 30rpx;
	}

	.select-city-list {
	}

	.city-wrapper {
		padding: 0 30rpx;
	}

	.item_letter {
		display: flex;
		/* background-color: #fff; */
		margin: 40rpx 0 20rpx 0;
		height: 40rpx;
		/* padding-left: 34rpx; */
		align-items: center;
		font-size: 30rpx;
		color: #333;
	}

	.item_city {
		width: calc(33.3% - 40rpx);
		padding: 20rpx 10rpx;
		margin: 10rpx 20rpx 10rpx 0;
		display: inline-block;
		font-size: 24rpx;
		color: #333;
		background: #f8f8f8;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item_city.last {
		margin: 10rpx 0;
	}

	.hotcity-common {
		font-size: 30rpx;
		color: #333;
		margin: 30rpx 0;
	}

	.hotCity {
		padding-right: 50rpx;
		margin: auto;
	}

	.thisCityName {
		display: inline-block;
		border: 1rpx solid #e41805;
		border-radius: 8rpx;
		padding: 15rpx 0;
		font-size: 24rpx;
		color: #e41805;
		text-align: center;
		min-width: 149.5rpx;
		margin: 16rpx 0;
	}

	.thishotText {
		color: #fec240;
		font-size: 20rpx;
		margin: 0 !important;
	}

	.slectCity {
		border-color: #fec240 !important;
	}

	.slectCity view {
		color: #fec240 !important;
	}

	.weui-grid {
		padding: 10rpx 0;
		width: 200rpx;
		box-sizing: border-box;
		border: 1rpx solid #ececec;
		border-radius: 8rpx;
		background-color: white;
		margin: 8rpx 0;
	}

	.weui-grids {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.weui-grid__label {
		display: block;
		text-align: center;
		color: #333;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ul {
		display: block;
		color: grey;
		margin-left: 20rpx;
	}

	.li {
		display: block;
		font-weight: 100;
		font-size: 28rpx;
		padding: 16rpx 0;
	}

	input {
		background-color: #eee;
	}

	.input {
		padding: 16rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.county {
		display: flex;
		flex-wrap: wrap;
	}

	/* 字母导航 */
	.navigation-bars {
		z-index: 2;
		position: fixed;
		top: 140rpx;
		right: 0rpx;
		width: 30rpx;
	}

	.navigation-bars-initial {
		display: flex;
		width: 24rpx;
		height: 24rpx;
		justify-content: center;
		align-items: center;
		color: #999;
		margin: 20rpx auto;
		font-size: 20rpx;
		border-radius: 50%;
	}

	.navigation-bars-initial.active {
		background: #e41805;
		color: #fff;
	}

	.letter-scroll {
		position: relative;
		height: 100vh;
		padding: 0 30rpx;
		overflow: hidden;
	}
}
</style>
